<template>
    <!--    注册页-->
    <div>
        <div v-if="$store.state.Reg" class="regist">
              <h2 style="padding: 0 5px 5px;">注册</h2>
            <div class="components-input-demo-presuffix">
              <a-form :form="form" @submit="handleSubmit">

                  <a-form-item v-bind="formItemLayout">
      <span slot="label">
        账号
      </span>
      <a-input
              v-decorator="[
          'loginName',
          {
            rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
          },
        ]"
              placeholder="请输入账号"
      />
    </a-form-item>

    <a-form-item v-bind="formItemLayout" label="密码" has-feedback>
      <a-input
              v-decorator="[
          'password',
          {
            rules: [
              {
                required: true,
               pattern:'^(?![^a-zA-Z]+$)(?!\\\\D+$).{8,16}$',
                message: 'Please input your password!',
              },
              {
                validator: validateToNextPassword,
              },
            ],
          },
        ]"
              placeholder="请输入8到16位包括字母的密码"
              type="password"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="确认密码" has-feedback>
      <a-input
              v-decorator="[
          'confirm',
          {
            rules: [
              {
                required: true,
                message: '请与密码一致',
              },
              {
                validator: compareToFirstPassword,
              },
            ],
          },
        ]"
              type="password"
              placeholder="请输入确认密码"
              @blur="handleConfirmBlur"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout">
      <span slot="label">
        昵称
      </span>
      <a-input
              v-decorator="[
          'nickname',
          {
            rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
          },
        ]"
              placeholder="请输入昵称"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="手机号码">
      <a-input
              ref="phone"
              v-decorator="[
          'phone',
          {
            rules: [{ required: true, message: '请正确输入您的手机号' }],
          },
        ]"
              placeholder="请输入手机号"
              style="width: 100%"

      >
        <a-select
                slot="addonBefore"
                v-decorator="['prefix', { initialValue: '86' }]"
                style="width: 70px"
        >
          <a-select-option value="86">
            +86
          </a-select-option>
          <a-select-option value="87">
            +87
          </a-select-option>
        </a-select>
      </a-input>
    </a-form-item>
    <a-form-item
            v-bind="formItemLayout"
            label="验证码"
    >
      <a-row :gutter="8">
        <a-col :span="12">
          <a-input
                  v-decorator="[
              'captcha',
              { rules: [{ required: true, message: '请输入验证码' }] },
            ]"
          />
        </a-col>
        <a-col :span="12">
          <a-button @click="indenCode" :disabled="disable">获取验证码</a-button>
        </a-col>
      </a-row>
    </a-form-item>
    <a-form-item v-bind="tailFormItemLayout">
        <a-row :gutter="8">
            <a-col :span="12">
      <a-button type="primary" html-type="submit">
        注册
      </a-button>
            </a-col>
            <a-col :span="4"></a-col>
                <a-col :span="8" @click="$store.commit('changeReg',{reg:false})">

                        <a-icon type="arrow-right" />
                        去登录

                </a-col>

        </a-row>
    </a-form-item>
  </a-form>
            </div>

        </div>
    </div>
</template>
<script>
    import {phoneCode} from "../api/api";

    const residences = [
        {
            value: 'zhejiang',
            label: 'Zhejiang',
            children: [
                {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                        {
                            value: 'xihu',
                            label: 'West Lake',
                        },
                    ],
                },
            ],
        },
        {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [
                {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                        {
                            value: 'zhonghuamen',
                            label: 'Zhong Hua Men',
                        },
                    ],
                },
            ],
        },
    ];

    import {register} from '../api/api'


    export default {
        name: "Register",
        data() {
            return {
                visible: false,
                username: "",
                psd: "",
                code: 500,
                info: {},
                flag: true,

                disable:false,
                num:60,
                timer:null,

                confirmDirty: false,
                residences,
                autoCompleteResult: [],
                formItemLayout: {
                    labelCol: {
                        xs: {span: 24},
                        sm: {span: 8},
                    },
                    wrapperCol: {
                        xs: {span: 24},
                        sm: {span: 16},
                    },
                },
                tailFormItemLayout: {
                    wrapperCol: {
                        xs: {
                            span: 24,
                            offset: 0,
                        },
                        sm: {
                            span: 16,
                            offset: 8,
                        },
                    },
                },
            };
        },


        created() {
            this.form = this.$form.createForm(this, {name: 'register'});
        },

        methods: {
            indenCode(){
                phoneCode(this.$refs.phone.value).then(() => {
                    // console.log(res)
                    this.flog = true;
                    clearInterval(this.timer)
                    this.timer = setInterval(() => {
                        this.num--;
                        if (this.num <= 0) {
                            this.msg = "重新获取验证码"
                            clearInterval(this.timer)
                            this.num = 60;
                            this.flog = false;
                        } else {
                            this.msg = this.num + "秒重新获取"
                        }
                    }, 1000)
                })

            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFieldsAndScroll((err, values) => {
                    if (!err) {
                        // console.log('Received values of form: ', values);
                        // loginName,code,phonenumber,password,userName
                        register(values.loginName,values.captcha,values.phone,values.password,values.nickname).then((res)=>{
                            // console.log(res)
                            if(res.code===0){
                                this.$message.success('成功注册')
                            }else{
                                this.$message.warning(res.msg)
                            }
                        })
                    }
                });
            },
            handleConfirmBlur(e) {
                const value = e.target.value;
                this.confirmDirty = this.confirmDirty || !!value;
            },
            compareToFirstPassword(rule, value, callback) {
                const form = this.form;
                if (value && value !== form.getFieldValue('password')) {
                    callback('Two passwords that you enter is inconsistent!');
                } else {
                    callback();
                }
            },
            validateToNextPassword(rule, value, callback) {
                const form = this.form;
                if (value && this.confirmDirty) {
                    form.validateFields(['confirm'], {force: true});
                }
                callback();
            },
            handleWebsiteChange(value) {
                let autoCompleteResult;
                if (!value) {
                    autoCompleteResult = [];
                } else {
                    autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
                }
                this.autoCompleteResult = autoCompleteResult;
            },
        },


    }
</script>
<style lang="less" scoped>
    .regist{
        width: 100%;
        margin-top: -40px;
        h2{
            text-align: center;
        }
    }
    .ant-btn{
        width: 100%;
        height: 50px;
        border-color: rgb(64, 169, 255);
        background-color: rgb(64, 169, 255);
        color: #f7f8fa;
    }
    .ant-btn:active{
        background-color: white;
        color: rgb(64, 169, 255);
    }
</style>